<template>
  <div>

    <div ref="richEditor">
      <div v-if="disabled" v-html="value" class="border p-3 bg-light"></div>
    </div>
    <el-alert v-if="editor" size="mini"
              title="提示: 直接回车为分段， SHIFT + 回车 为换行"
              type="info" :closable="false">
    </el-alert>
    <el-input v-if="!disabled && !editor" type="textarea" v-model="content" :autosize="true"
              style="min-height: 6em"></el-input>

    <div style="display: none">
      <upload-file
          v-if="enableMedia"
          ref="richEditorUploader"
          :file-disk="enableMedia"
          :file-upload-timely="true"
          v-on:upload-success="choseFileCallback"></upload-file>
    </div>
    <!--      <el-dialog
              title="上传或选择已有文件"
              custom-class="dialog-input-files"
              :visible.sync="dialogFinderVisible"
              :close-on-click-modal="false"
              append-to-body
              width="80%"
          >

            <span slot="footer" class="dialog-footer"></span>
          </el-dialog>-->

  </div>
</template>

<script>


export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    editorOptions: {
      type: Object,
      default: function () {
        return {}
      },
    },
    enableMedia: { //允许插入文件,图片等
      type: [Boolean,String],
      default: function () {
        return false
      },
    },
    disabled: { //不可编辑
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editor: null,
      content: '',
      dialogFinderVisible: false,
      choseFileCallback: function () {
        return false;
      }
    }
  },
  created() {
    let _this = this;
    _this.content = _this.value;
  },
  mounted() {
    let _this = this;
    _this.editor && _this.editor.destroy()

    if (!_this.disabled) {
      LeUtils.timeCountDown(180, null, function () {
        if (window.ckEditor) {

          //禁用上传
          if (!_this.enableMedia) {
            /*if(LeUtils.isEmpty(_this.editorOptions)){
              _this.editorOptions = window.ckEditor.defaultConfig
            }*/
            _this.editorOptions.removePlugins = LeUtils.valueGet(_this.editorOptions, 'removePlugins', []).concat(['MediaBrowser', 'Media']);
          }

          window.ckEditor.create(_this.$refs.richEditor, _this.editorOptions)
              .then(editor => {

                editor.setData(_this.value || '');

                if (editor.commands.get('mediaBrowser')) {
                  editor.commands.get('mediaBrowser').execute = function () {
                    const editor = this.editor;

                    editor.model.change(writer => {
                      _this.openResourceFinder();
                      _this.choseFileCallback = function (resource) {
                        let resType = resource.type || '';

                        let element = null;
                        switch (resType) {
                          case 'image':
                          case 'audio':
                          case 'video':
                            element = writer.createElement('media', {
                              alt: resource.name || '',
                              src: resource.url || '',
                              type: resType
                            });
                            break;

                          default:
                            element = writer.createText(resource.name || '', {
                              linkHref: resource.url || '',
                            });

                            //console.error('不支持的类型:' + resType)
                            break;
                        }

                        if (element) {
                          editor.model.insertContent(element, editor.model.document.selection);
                        }

                        _this.hideResourceFinder();
                      }
                    });


                  }
                }

                editor.model.document.on('change:data', () => {
                  //debugger
                  _this.content = editor.getData();

                  //console.log(item,content);
                });
                _this.editor = editor;
              })
              .catch(error => {
                console.error(error);
              });
          return true;
        }
      })
    }


  },
  watch: {
    content: function (newValue, oldValue) {
      this.$emit('change', newValue)
    }
  },
  methods: {
    hideResourceFinder: function () {
      let _this = this;
      this.dialogFinderVisible = false;

    },
    openResourceFinder: function () {
      let _this = this;
      _this.$refs.richEditorUploader.selectFile()
      //this.dialogFinderVisible = true;

    }
  }
}
</script>
